<!-- 为组件的props标注类型 -->
<script lang="ts" setup>
import { ref } from 'vue'

/**
 * 运行时声明
 */
// const props = defineProps({
//   foo: { type: String, required: true },
//   bar: Number,
// })

/**
 * 基于类型的声明--泛型参数(通常使用)
 */
// const props = defineProps<{
//   foo: String
//   bar?: Number
// }>()

/**
 * props类型移入单独的接口
 */

// interface Props {
//   foo: String
//   bar?: Number
// }

// const props = defineProps<Props>()

/**
 *泛型参数设置默认值
 */
export interface Props {
  foo?: string
  bar?: number
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  foo: '111',
  bar: 0,
  labels: () => ['one', 'two'],
})
</script>

<template>
  <div>为组件的props标注类型</div>
  <div>foo值：{{ props.foo }}</div>
  <div>bar值：{{ props.bar }}</div>
  <div>labels值：{{ props.labels }}</div>
</template>

<style lang="scss" scoped></style>
